<!--
 * @Author: wangming
 * @Date: 2020-09-16 09:16:01
 * @LastEditors: wangming
 * @LastEditTime: 2020-12-11 12:00:03
 * @Description: file content
-->
<template>
  <date-picker
    range
    :disabled="isEdit"
    :style="{ width: config.__config.width + '%', height: '32px' }"
    :minute-step="config.__config.timefilter || 1"
    prefix-class="xmx"
    :value="dateAry"
    :type="dateConfig.type"
    valueType="format"
    @change="changeDate"
    :format="config.__config.format"
    :editable="false"
    :disabled-date="disabledBeforeTodayAndAfterAWeek"
  >
    <template v-slot:input>
      <el-input
        :placeholder="dateConfig.placeholder + '区间'"
        readonly
        :value="value"
      ></el-input>
    </template>
  </date-picker>
</template>

<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import { dateLimitTypeList, dateConfig } from "@/utils/dateLimitTypeList";
export default {
  computed: {
    dateConfig() {
      return (
        dateConfig.find((i) => this.config.__config.format === i.format) || {}
      );
    },
    dateLimit() {
      return (
        dateLimitTypeList.find(
          (i) => i.value === this.config.__config.dateLimitType
        ) || {}
      );
    },
    dateAry() {
      if (!!this.value) {
        return this.value.split("~");
      } else {
        return [];
      }
    },
  },
  mixins: [myMixin, vmMixin],
  components: {},
  data() {
    return {};
  },
  methods: {
    disabledBeforeTodayAndAfterAWeek(date) {
      if (!this.dateLimit.maxDate && !this.dateLimit.minDate) {
        return false;
      }
      if (!!this.dateLimit.maxDate && !!this.dateLimit.minDate) {
        return (
          date > new Date(this.dateLimit.maxDate) ||
          date < new Date(this.dateLimit.minDate)
        );
      }
      if (!!this.dateLimit.maxDate) {
        return date > new Date(this.dateLimit.maxDate);
      }
      if (!!this.dateLimit.minDate) {
        return date < new Date(this.dateLimit.minDate);
      }
    },
    changeDate(date) {
      if (date.some((i) => !!i)) {
        this.$emit("input", date.join("~"));
      } else {
        this.$emit("input", "");
      }
    },
  },
};
</script>


